<!DOCTYPE html>
<html>
<head>
	<meta charset= "utf-8">
	<meta name= "viewport" content= "width=device-width, initial-scale= 1.0">
	<link rel="stylesheet" href="index.css">
	<script type= "text/javascript" src= "index.js" ></script>
    <title>Maps with Photos</title>
</head>
<body>
	<nav class= "topnav" id="topnav">
		<h1>Mappics: Journeys through Photos</h1>
<?php
		echo 'You are not logged in.<br />';
?>
		<a href= "Session/login.php"> Upload </a>
		<a href= "Session/login.php"> Edit </a>
		
		<!-- <button type="button"> Filter </button> --> <!--position: absolute; top: 10px; right: 10px;-->
		<button id="collapseBtn" class="btn btn-menu" type="button" aria-expanded="false" aria-controls="DataMenu" style=" 
				cursor: pointer; width:100px;  height: 60px; font-size: 30px;  background-color: #89986D; color: white; border: none;" onclick="return overlay()">
				Filters
		</button>
		
		<a href= "Session/login.php"> login </a>
	</nav>

    <!-- The div element where the map will be embedded -->
    <div id="googleMap"></div>
	
	<!-- kiosk Overlay -->
	<div id="kioskContainer" >
		<a> Kiosk Mode </a>
	</div>
	
	<!-- Filter overlay -->
	<div id="filterContainer" style="left: device-width">
		<div id="insideFilter">
			<form id="photoNameForm">
				<h2>Search by Photo Name</h2>
				<div id="container" style="margin:0 auto; width:auto;">
					<br>
					<input type="text" id="photoName">
				</div>
			</form>
			
			<form id="userNameForm">
				<h2>Search by User</h2>
				<div id="container" style="margin:0 auto; width:auto;">
					<br>
					<input type="text" id="username">
				</div>
			</form>
			
			<form id="YearForm">
				<h2>Year</h2>

				<label for="minYear">Minimum Year:</label>
				<select id="minYear" name="minYear" onchange="yearBounds()"></select>

				<br>
	
				<label for="maxYear">Maximum Year:</label>
				<select id="maxYear" name="maxYear" onchange="yearBounds()"></select>
			</form>

			<form id="photoType">
				<h2>Photo Type</h2>

				<input type="checkbox" id="public" value="public" checked= "checked">
				<label for="public">Public</label>
				<input type="checkbox" id="private" value="private">
				<label for="private">Private</label>
				
			</form>
		</div>
		<br>
		<button id="searchAlumBtn" onclick="filter()">Apply Filters</button>
		<button id="clearFiltersBtn" onclick="resetFilter()">Clear Filters</button>
		<button id="kioskModeBtn" onclick="kioskMode()">Kiosk Mode</button>
	</div>
	
	<!-- End of Stuff -->

    <!-- Load the Maps JavaScript API using a bootstrap loader -->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAkAZn5BQC3mdFoHCgnalLZGs7BHtQDyoc&callback=myMap"></script>

</body>
</html>